<template>
    <div>
        <Header :activIndex = "3"></Header>
        <div class="top_big">
            <img :src="banImg" alt="">
        </div>
        <div class="main_width">
            <div class="nav"> <myBread :breadList="breadList"></myBread></div>
            <div class="tit">
                {{msg.ruleTitle}}
            </div>
            <div class="tc mt_20">{{msg.createDate}}</div>
            <div>
                <p class="content" v-html="msg.ruleContent"></p>
            </div>
        </div>
    </div>
</template>
<script>
    import myBread from "~/components/bread";
    import Header from "~/components/header"
    export default {
        components: {
            Header,
            myBread,
        },       
        data(){
            return {
                msg:{},
                banImg:'',
                breadList: [Array],
            }
        },
        mounted(){
            this.getData(this.$route.query.id)
        },
        methods:{
            getBreadcrumb(title) {
                let matched = this.$route.matched;
                matched[0].meta.title = title;
                matched = [
                    { path: "/", meta: { title: "首页" } },
                    { path: "/policyRule", meta: { title: "政策法规" } }
                ].concat(matched);
                this.breadList = matched;
            },            
            getData(id){
                this.get('/api/rules/'+id).then(data=>{
                    this.msg=data.data
                    this.getBreadcrumb(this.msg.ruleTitle)
                });
                this.get('/api/rules/indexss').then(data=>{
                    if(data.data.slideDTOList.length!=0){
                        this.banImg=data.data.slideDTOList[0].slideImage
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .content{
        text-indent: 2em; 
       line-height: 20px;
       padding: 30px 0;
       min-height: 400px
    }
    .tit{
        font-size: 18px;
        text-align: center;
        background: #EEEEEE;
        padding: 10px 0;
        border-bottom: 1px solid #2C9F45;
        letter-spacing:3px;
    }
    .top_big{height: 490px;}
    .top_big img{
        width: 100%;height: 100%;background: no-repeat center / cover;
    }    
</style>  